<template>
  <div class="homepage" id="homepage">
    <div class="background">
      <img src="../../assets/images/background6.jpg" class="background" alt="">
    <div>
      <div class="main" id="pageMain">
        <div style="height: 100%; width: 50%; margin-left: 28%">
          <div class="title2">Academic学术资源分享平台</div>
          <div class="title" >开放 包容 共享</div>
          <div class="title2"  @click="gohome">点击进入</div>
          <!--<div class="input-box">
              <el-button type="primary" icon="el-icon-search" @click="gohome">点击进入</el-button>
          </div>-->
        </div>
        <div style="height: 100%; width: 50%; float: left">
<!--        <div class="logos">-->
<!--            <div >-->
<!--              <el-row>-->
<!--                <el-col :span="6" style="padding:10px; margin-right:20px">-->
<!--                  <img class="image" src="../../assets/images/home_aut.jpg" style="width:70px">-->
<!--                </el-col>-->
<!--                <el-col :span="5" style="padding:10px; margin-left:20px">-->
<!--                  <h3 class="sub-title">Authors</h3>-->
<!--                  <h2 class="sub-number">{{ statistic.author_count }}</h2>-->
<!--                </el-col>-->
<!--              </el-row>-->
<!--            </div>-->
<!--            <div >-->
<!--              <el-row>-->
<!--                <el-col :span="6" style="padding:10px; margin-right:20px">-->
<!--                  <img class="image" src="../../assets/images/home_art.jpg" style="width:70px">-->
<!--                </el-col>-->
<!--                <el-col :span="5" style="padding:10px; margin-left:20px">-->
<!--                  <h3 class="sub-title">Papers</h3>-->
<!--                  <h2 class="sub-number">{{ statistic.paper_count }}</h2>-->
<!--                </el-col>-->
<!--              </el-row>-->
<!--            </div>-->
<!--            <div>-->
<!--&lt;!&ndash;              <el-row>&ndash;&gt;-->
<!--&lt;!&ndash;                <el-col :span="6" style="padding:10px; margin-right:20px">&ndash;&gt;-->
<!--&lt;!&ndash;                  <img class="image" src="../../assets/images/home_jou.jpg" style="width:70px">&ndash;&gt;-->
<!--&lt;!&ndash;                </el-col>&ndash;&gt;-->
<!--&lt;!&ndash;                <el-col :span="5" style="padding:10px; margin-left:20px">&ndash;&gt;-->
<!--&lt;!&ndash;                  <h3 class="sub-title">Journals</h3>&ndash;&gt;-->
<!--&lt;!&ndash;                  <h2 class="sub-number">{{ statistic.journal_count }}</h2>&ndash;&gt;-->
<!--&lt;!&ndash;                </el-col>&ndash;&gt;-->
<!--&lt;!&ndash;              </el-row>&ndash;&gt;-->
<!--            </div>-->
<!--            <div>-->
<!--&lt;!&ndash;              <el-row>&ndash;&gt;-->
<!--&lt;!&ndash;                <el-col :span="6" style="padding:10px; margin-right:20px">&ndash;&gt;-->
<!--&lt;!&ndash;                  <img class="image" src="../../assets/images/home_org.jpg" style="width:70px">&ndash;&gt;-->
<!--&lt;!&ndash;                </el-col>&ndash;&gt;-->
<!--&lt;!&ndash;                <el-col :span="5" style="padding:10px; margin-left:20px">&ndash;&gt;-->
<!--&lt;!&ndash;                  <h3 class="sub-title">Organizations</h3>&ndash;&gt;-->
<!--&lt;!&ndash;                  <h2 class="sub-number">{{ statistic.affiliation_count }}</h2>&ndash;&gt;-->
<!--&lt;!&ndash;                </el-col>&ndash;&gt;-->
<!--&lt;!&ndash;              </el-row>&ndash;&gt;-->
<!--            </div>-->
<!--            <div>-->
<!--&lt;!&ndash;              <el-row>&ndash;&gt;-->
<!--&lt;!&ndash;                <el-col :span="6" style="padding:10px; margin-right:20px">&ndash;&gt;-->
<!--&lt;!&ndash;                  <img class="image" src="../../assets/images/home_fie.jpg" style="width:70px">&ndash;&gt;-->
<!--&lt;!&ndash;                </el-col>&ndash;&gt;-->
<!--&lt;!&ndash;                <el-col :span="5" style="padding:10px; margin-left:20px">&ndash;&gt;-->
<!--&lt;!&ndash;                  <h3 class="sub-title">Field</h3>&ndash;&gt;-->
<!--&lt;!&ndash;                  <h2 class="sub-number">{{ statistic.fields_count }}</h2>&ndash;&gt;-->
<!--&lt;!&ndash;                </el-col>&ndash;&gt;-->
<!--&lt;!&ndash;              </el-row>&ndash;&gt;-->
<!--            </div>-->
<!--        </div>-->
        </div>
      </div>
    </div>
    </div>
  </div>
</template>

<script>
import Articles from "../../components/Articles";
import PageHeader from "../../components/PageHeader";
import $ from 'jquery';
import qs from "qs";
export default {
  name: "HomePage",
  components: {PageHeader, Articles},
  data() {
    return {
      activeNameOut: "topArticle",

      searchValue: '',
      select: 'main',

      statistic: {
        affiliation_count: '27,063',
        author_count: '280,050,502',
        conference_count: '16,479',
        fields_count: '714,856',
        journal_count: '49,063',
        paper_count: '269,451,039',
        topic_count: 0
      },
      results: [],
      showPrefix: true,
    }
  },
  created() {
    this.getInfo();
    // this.getRecommend();
  },
  watch: {
    searchValue(newVal, oldVal) {
      if (newVal !== '' && newVal !== oldVal)
        this.getPrefix();
    },
    select(newVal, oldVal) {
      if (newVal !== '' && newVal !== oldVal)
        this.getPrefix();
    },
    results(newVal) {
      if (newVal.length > 0)
        this.showPrefix = true;
    }
  },
  methods:{
    gohome(){
      this.$router.push('/homepage');
    },
    getInfo(){
      this.$axios({
        method:'post',
        url:'my_app/get_count',
      }).then(res=>{
        console.log(res.data);
        this.statistic.author_count = res.data.user_count;
        this.statistic.paper_count = res.data.achievement_count;
      })
    },
    // getInfo() {
    //   let self = this;
    //   this.$axios.all([this.getStat(), this.getHot()])
    //       .then(this.$axios.spread(function (statDetail, recomDetail) {
    //         if (statDetail.data.success) {
    //           self.statistic = statDetail.data;
    //
    //           self.statistic.fields_count = self.statistic.fields_count.toLocaleString();
    //           self.statistic.affiliation_count = self.statistic.affiliation_count.toLocaleString();
    //           self.statistic.author_count = self.statistic.author_count.toLocaleString();
    //           self.statistic.journal_count = self.statistic.journal_count.toLocaleString();
    //           self.statistic.paper_count = self.statistic.paper_count.toLocaleString();
    //
    //         } else {
    //           this.$message.error("系统错误，请联系管理员解决");
    //         }
    //
    //         if (recomDetail.data.success) {
    //           self.top_articles = recomDetail.data.data;
    //         } else {
    //           this.$message.error("系统错误，请联系管理员解决");
    //         }
    //       }))
    //       .catch(err => {
    //         console.log(err);
    //       })
    // },
    getStat() {
      // return this.$axios({
      //   method: 'post',
      //   url: '/count/all',
      // });
    },
  },
}
</script>

<style scoped>

.homepage {
  min-width: 1100px;
}

.homepage .input-box-body {
  float: left;
  padding-left: 12%;
  padding-right: 10%;
  padding-top: 5%;
  text-align: left;
}

.homepage .background {
  position:absolute;
  width:100%;
  height:100%;
  left:0;
  z-index:-1;
  object-fit: cover;
}

.homepage .input-box {
  margin-top: 60px;
}
.homepage .input-box >>> .el-input.is-active .el-input__inner, .el-input__inner:focus {
  border: 5px solid #409EFF;
}
.homepage .input-box >>> .el-input__inner {
  height: 50px;
}
.homepage .input-box >>> .el-input-group__append {
  background-color: #409EFF;
  color: white;
  vertical-align: middle;
  display: table-cell;
  position: relative;
  border: none;
  border-radius: 0 6px 6px 0;
  padding: 0 20px;
  width: 1px;
  white-space: nowrap;
}
.homepage .input-box >>> .el-input-group__append:hover {
  background-color: #52a9ff;
}
.homepage .input-box >>> .el-input-group--prepend {
  border-radius: 6px 0 0 6px;
}
.homepage .input-box-body .input-box button {
  color: white;
}

.homepage .title {
  font-family: "Asap SemiBold",tahoma,arial,"Hiragino Sans GB",\5b8b\4f53, sans-serif;
  font-size: 70px;
  margin-top: 120px;
  font-weight: 600;
   background-image: radial-gradient(#ED4264, #FFEDBC);
   width: 700px;
  /*font-size: 50px;*/
   -webkit-background-clip: text;
   color: transparent;
   animation: ani 3s infinite ease-in-out;
   background-position: 200px 200px;
 }

@keyframes ani {
  0% {
    background-position: 250px 200px;
  }

  100% {
    background-position: 450px 400px;

  }
}


.homepage .title2 {
  font-family: "Asap SemiBold",tahoma,arial,"Hiragino Sans GB",\5b8b\4f53, sans-serif;
  font-size: 50px;
  margin-top: 150px;
  color: white;
  font-weight: 600;
}

.homepage .sub-title {
  display:block;
  font-family: 'Courier New',serif;
  font-weight:bold;
  margin-bottom:0 !important;
  color:white;
}

.homepage .sub-number {
  display:block;
  font-family:'Courier New',serif;
  margin-top:10px;
  color:white;
}

.homepage .logos {
  width: 30%;
  float: left;
  margin-top: 40%;
  padding-top: 0px;
  padding-left: 38%;
}

.homepage .topRecommend {
  min-width: 900px;
  margin: 50px 12%;
  padding: 20px 40px 60px;
  background-color: white;
  box-shadow: 0 2px 4px rgba(0, 0, 0, .08), 0 0 6px rgba(0, 0, 0, .04)
}

.homepage .grid-content[data-v-1274387a] {
  border-radius: 14px;
  min-height: 36px;
}
.homepage .bg-purple-light {
  background: #e5e9f2;
}
.homepage .grid-content {
  border-radius: 4px;
  min-height: 36px;
}

.homepage .test_a {
  display: block;
  margin: 0 auto;
  width:100%;
  overflow: hidden;
}

.homepage .test_a img {
  width: 100%;
  transform: scale(1);
  transition: all 1s ease 0s;
}

.homepage .test_a:hover img {
  transform: scale(1.2);
  transition: all 1s ease 0s;
}


</style>
